<template>
<div>
	<h2 class="intro-title">Slider 滑块</h2>
	<p class="intro-content">通过拖动滑块在一个固定区间内进行选择</p>

	<demo01></demo01>
	<demo02></demo02>
	<demo03></demo03>
	<demo04></demo04>

	<h3 class="base-title">Attributes</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>参数</th>
				<th>说明</th>
				<th>类型</th>
				<th>可选值</th>
				<th>默认值</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in list1' :key='item.val1'>
				<td>{{item.val1}}</td>
				<td>{{item.val2}}</td>
				<td>{{item.val3}}</td>
				<td>{{item.val4}}</td>
				<td>{{item.val5}}</td>
			</tr>
		</tbody>
	</table>
	<h3 class="base-title">Events</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>事件名称</th>
				<th>说明</th>
				<th>回调参数</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in list2' :key='item.val1'>
				<td>{{item.val1}}</td>
				<td>{{item.val2}}</td>
				<td>{{item.val3}}</td>
			</tr>
		</tbody>
	</table>
</div>
</template>

<script>
import demo01 from './demo01.vue'
import demo02 from './demo02.vue'
import demo03 from './demo03.vue'
import demo04 from './demo04.vue'

const list1 = [{
	val1: 'value / v-model',
	val2: '绑定值',
	val3: 'number',
	val4: '--',
	val5: '0',
},{
	val1: 'disabled',
	val2: '是否禁用',
	val3: 'boolean',
	val4: '--',
	val5: 'false',
},{
	val1: 'vertical',
	val2: '是否竖向模式',
	val3: 'boolean',
	val4: '--',
	val5: 'false',
},{
	val1: 'height',
	val2: 'Slider 高度，竖向模式时必填',
	val3: 'string',
	val4: '--',
	val5: '--',
}].sort((a, b) => {
	return a.val1.localeCompare(b.val1);
});
const list2 = [{
	val1: 'change',
	val2: '值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）',
	val3: '改变后的值',
	val4: '--',
	val5: '--',
}].sort((a, b) => {
	return a.val1.localeCompare(b.val1);
});

export default {
	components: {
		'demo01': demo01,
		'demo02': demo02,
		'demo03': demo03,
		'demo04': demo04,
	},
	data () {
		return {
			list1: list1,
			list2: list2,
		};
	},
}
</script>

<style scoped>
</style>
